<template>
  <div class="singerdetails">
    <div class="base-info">
      <div class="left">
        <img class="image" :src="artist.img1v1Url" />
      </div>
      <div class="right">
        <h3>
          <span
            :style="{
              color: themeColor,
              border: `0.0625rem solid ${themeColor}`
            }"
            >歌手</span
          >
          {{ artist.name }}
        </h3>
        <div class="right-item">
          <div class="item">单曲数：{{ artist.musicSize }}</div>
          <div class="item">专辑数：{{ artist.albumSize }}</div>
          <div class="item">MV数：{{ artist.mvSize }}</div>
        </div>
        <div class="right-text">
          <div class="jianjie" :class="{ isopen: isOpen === false }">
            简介:
            <p
              class="album-desc"
              v-for="(item, index) in formatText(artist.briefDesc)"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
          <p class="open" @click="isOpen = !isOpen">
            <i
              :class="[
                { 'el-icon-arrow-down': isOpen === false },
                { 'el-icon-arrow-up': isOpen === true }
              ]"
            ></i
            >{{ isOpen == false ? "展开" : "收起" }}
          </p>
        </div>
      </div>
    </div>
    <div class="tbas">
      <el-tabs v-model="activeName">
        <el-tab-pane label="热门作品" name="hot">
          <ch-musiclist :playlist="playlist" />
        </el-tab-pane>
        <el-tab-pane label="所有专辑" name="zhuanji">
          <ch-albumlist :totalAlbum="artist.albumSize" />
        </el-tab-pane>
        <el-tab-pane label="相关MV" name="mv">
          <ch-singermv :totalMv="artist.mvSize" />
        </el-tab-pane>
        <el-tab-pane label="艺人介绍" name="jieshao">
          <ch-singerdesc :singerName="artist.name" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import MusicList from "./components/musiclist";
import AlbumList from "./components/albumlist";
import SingerDesc from "./components/singerdesc";
import SingerMv from "./components/singermv";
import { getArtistsingle } from "@/api/singer.js";
import { getplaylisSongdetail } from "@/api/music.js";
import { songDetail } from "@/utils/detail.js";
export default {
  name: "SingerDetails",
  components: {
    "ch-musiclist": MusicList,
    "ch-albumlist": AlbumList,
    "ch-singerdesc": SingerDesc,
    "ch-singermv": SingerMv
  },
  props: {},
  data() {
    return {
      activeName: "hot",
      isOpen: false,
      artist: "",
      playlist: [],
      ids: []
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {
    $route() {
      this.playlist = [];
      this.getArtistsingle();
    }
  },
  created() {
    // 获取单曲
    this.getArtistsingle();
  },
  mounted() {},
  methods: {
    // 获取单曲
    async getArtistsingle() {
      this.showLoading();
      const { data } = await getArtistsingle({
        id: this.$route.query.id
      });
      if (data.code === 200) {
        this.closeLoading();
      }
      data.hotSongs.forEach(async val => {
        this.ids.push(val.id);
      });
      const hotsong = await getplaylisSongdetail({
        ids: this.ids.join(",")
      });
      // console.log(hotsong);
      hotsong.data.songs.forEach(val => {
        let song = new songDetail(val);
        this.playlist.push(song);
      });
      this.artist = data.artist;
      this.title();
    },
    // 简介循环
    formatText(text) {
      if (text) {
        let newText = text.split("\n");
        return newText;
      }
    },
    title() {
      let alias;
      if (this.artist.alias.length === 2) {
        alias =
          "( " + this.artist.alias[0] + " , " + this.artist.alias[1] + " )";
      } else if (this.artist.alias.length === 1) {
        alias =
          this.artist.alias[0] !== " "
            ? "( " + this.artist.alias[0] + " )"
            : "";
      } else if (this.artist.alias.length === 0) {
        alias = "";
      }
      document.title = `${this.artist.name}${alias} - 歌手  - 网抑云音乐`;
    }
  }
};
</script>

<style scoped lang="scss">
.singerdetails {
  .base-info {
    position: relative;
    width: 100%;

    display: flex;
    font-size: 1rem;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
    padding: 0.9375rem 0;
    .left {
      width: 14.28571rem;
      height: 100%;
      padding-right: 2.5rem;
    }
    .image {
      width: 100% !important;
      padding: 0.3125rem;
    }
    .right {
      height: 100%;
      width: 80%;
      h3 {
        padding: 0.625rem 0;
        color: #000;
        font-weight: 700;
        span {
          padding: 0.125rem 0.625rem;
          border: 0.0625rem solid red;
          color: red;
          border-radius: 0.3125rem;
          font-weight: normal;
        }
      }
      .right-item {
        padding: 0.625rem 0;
        .item {
          padding: 0.3125rem 0;
          color: #0c73c2;
        }
      }

      .right-text {
        .jianjie {
          color: #666;
        }
        .open {
          float: right;
          color: #0c73c2;
          font-size: 0.875rem;
          padding-right: 0.625rem;
          cursor: pointer;
        }
        .isopen {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
